<template>
  <!-- 最底部广告之类的 -->
  <div class="footer-wrap">
    <div class="wrap">
      <div class="left">
        <div class="l-1">
          <a href="javascript:;">服务条款</a>
          <i>|</i>
          <a href="javascript:;">隐私政策</a>
          <i>|</i>
          <a href="javascript:;">儿童隐私政策</a>
          <i>|</i>
          <a href="javascript:;">版权投诉指引</a>
          <i>|</i>
          <a href="javascript:;">联系我们</a>
          <i>|</i>
          <a href="javascript:;">广告合作</a>
          <i>|</i>
          <a href="javascript:;">廉政举报</a>
        </div>
        <div class="l-2">
          <span>网易公司版权所有©1997-2022 &nbsp;&nbsp;&nbsp;&nbsp;</span>
          <span>
            杭州乐读科技有限公司运营：<a href="javascript:;"
              >浙网文[2021] 1186-054号</a
            >
          </span>
        </div>
        <div class="l-3">
          <a href="javascript:;"
            >粤B2-20090191-18&nbsp;&nbsp;工业和信息化部备案管理系统网站</a
          >
          <a href="javascript:;" class="spec">
            <img src="@/assets/police.png" alt="警察标识" />
            <span>浙公网安备 33010902002564号</span>
          </a>
        </div>
      </div>
      <div class="right">
        <ul>
          <li>
            <a href="javascript:;" class="a-1"></a>
            <p class="p-1"></p>
          </li>
          <li>
            <a href="javascript:;" class="a-2"></a>
            <p class="p-2"></p>
          </li>
          <li>
            <a href="javascript:;" class="a-3"></a>
            <p class="p-3"></p>
          </li>
          <li>
            <a href="javascript:;" class="a-4"></a>
            <p class="p-4"></p>
          </li>
          <li>
            <a href="javascript:;" class="a-5"></a>
            <p class="p-5"></p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "footer-buttom",
};
</script>

<style scoped lang="scss">
.footer-wrap {
  width: 100%;
  height: 172px;
  background-color: #f2f2f2;
  font-size: 12px;
  border-top: 1px solid #d3d3d3;
  .wrap {
    width: 980px;
    margin: 0 auto;
    display: flex;
    .left {
      width: 520px;
      padding-top: 15px;
      a {
        text-decoration: none;
        &:hover{
          text-decoration: underline;
        }
      }
      .l-1 {
        a {
          color: #999;
        }
        i {
          margin: 0 7px;
          font-size: 8px;
          color: #c2c2c2;
        }
      }
      .l-2 {
        a,span{
          color: #666;
        }
      }
      .l-1,
      .l-2,
      .l-3 {
        height: 24px;
        line-height: 24px;
        text-align: left;
      }
      .l-3 {
        a,span{
          color: #666;
        }
        .spec{
          position: relative;
          margin-left: 32px;
        }
        img{
          width: 14px;
          height: 14px;
          position: absolute;
          top: 1px;
          left: -15px;
        }
      }
    }
    .right {
      width: 460px;
      box-sizing: border-box;
      padding: 36px 0 0 60px;
      ul{
        li{
          float: left;
          margin: 0 12px;
          a{
            display: block;
            width: 50px;
            height: 45px;
            margin: 0 auto 10px;
            background: url('@/assets/foot_enter_new.png') no-repeat;
            background-size: 110px 552px;
            &.a-1{
              background-position: -62px -456px;
            }
            &.a-2{
              background-position: -62px -101px;
            }
            &.a-3{
              background-position: 0 0;
            }
            &.a-4{
              background-position: -62px -51px;
            }
            &.a-5{
              background-position: 1px -101px;
            }
          }
          p{
            height: 14px;
            background-color: orange;
            text-align: center;
            background: url('@/assets/foot_enter_tt.png') no-repeat;
            background-size: 180px 139px;
            &.p-1{
              background-position: 0 -108px;
              width: 72px;
            }
            &.p-2{
              background-position: 0px -91px;
              width: 52px;
            }
            &.p-3{
              background-position: 0 0;
              width: 52px;
            }
            &.p-4{
              background-position: 0 -54px;
              width: 52px;
            }
            &.p-5{
              background-position: -2px -72px;
              width: 52px;
            }
          }
        }
      }
    }
  }
}
</style>